<!-- 音标专练练习 -->

<template>
	<AppHeader :title="title" :banAnimate="true" backgroundColor="#ffffff" titleColor="#000000"
		@leftClickEvent="onClickLeft()">
	</AppHeader>
	<div class="container-practice" v-if="practoceList && practoceList.length">
		<div class="container-height"></div>
		<div class="practice-top">
			<div class="practice-top-currentPage">{{ currentPage }}<span>/{{ practoceList.length }}</span></div>
			<div class="practice-top-slider">
				<Slider v-model="currentPage" :disabled="true" min="1" :max="practoceList.length || 1000"
					active-color="#0CB76C">
				</Slider>
			</div>
		</div>
		<div class="container-text">
			<div class="container-list" ref="sentenceContainer" @scroll="scrollContainer">
				<div :class="currentPage === index + 1 ? 'autoGreed' : ''" class="container-item sentence"
					ref="sentencesRefs" v-for="(item, index)  in state.practoceList" :key="index">
					<div> {{ item.name.replace("{", "").replace("}", "") }}</div>
					<div v-if="isShowChinese">{{item.translate}}</div>
				</div>
			</div>
		</div>
		<div class="practice-button">
			<div class="wordsVoice"></div>
			<div class="wordsPlay">
				<!-- @click="tapeClick" -->
				<div class="circle-container" v-if="recordingStatus == 'playing'">
					<van-circle class="van-circle" :current-rate="currentRate" start-position="top" color="#0cb76c"
						size="70" />
					<img src="@/assets/phoneticPractice/读@3x.png" style="position: absolute;" />
				</div>
			</div>
			<div class="myVoice"></div>
		</div>
		<!-- 填充盒子 -->

		<div class="practice-bottom">
			<div class="autoPlay">
				<img src="@/assets/phoneticPractice/形状@3x.png" @click="automaticPlay" v-if="isPlay=='stop'" />
				<img src="@/assets/phoneticPractice/暂停@3x.png" @click="automaticPlay" v-if="isPlay=='play'" />
			</div>
			<!-- <div @click="isShowChinese = !isShowChinese" class="langage">{{isShowChinese?'英文':'中文'}}</div> -->
			<div class="next"></div>
		</div>
	</div>
	<audio ref="audioElement" :src="audioSrc" @ended="playEnded" preload="auto"></audio>
</template>

<script setup>
	import {
		Slider,
		Overlay
	} from "vant";
	import AppHeader from '../../components/AppHeader.vue'
	import {
		useRouter,
		useRoute
	} from 'vue-router'
	import {
		ref,
		watch,
		toRefs,
		reactive,
		nextTick,
		onMounted,
		onUnmounted
	} from 'vue'
	import {
		showToast,
	} from "vant";
	import {
		getMockTests,
	} from '@/api/followReading'
	import {
		wordDetail
	} from '@/api/textbook'
	const router = useRouter()
	const route = useRoute()
	const onClickLeft = () => {
		router.go(-1)
	}
	const currentPage = ref(1)
	const ossBaseUrl = ref('')
	const title = route.query.title;
	const state = reactive({
		practoceList: [],
		sourceObj: {}
	})
	const isShowChinese = ref(false) //是否显示中文

	const bottomImgSrc = ref()
	const audioElement = ref(null)
	const recordingStatus = ref('notStarted')
	//录音状态  playing语音播放中 playEnded语音播放结束 notStarted未开始   ended 播放完成
	const audioSrc = ref('')
	const currentRate = ref(0); //圆形当前数值
	const rateTimeVal = ref(null); //圆形当前数值
	
	watch(currentPage, (newVal) => {
		if (state.practoceList.length && isPlay.value == 'play') {
			scrollToSentence(newVal - 1)
			playAudio()
		}
	}, {
		immediate: true
	})
	
	const setRateInterval = (time) => {
		currentRate.value = 0;
		clearInterval(rateTimeVal.value);
		const stepTime = (100 / time) / 4;
		rateTimeVal.value = setInterval(() => {
			currentRate.value += stepTime;
			if (currentRate.value >= 100) {
				setTimeout(() => {
					currentRate.value = 0
				}, 200)
				clearInterval(rateTimeVal.value);
			}
		}, 250);
	};
	
	const scrollToSentence = (index) => {
		if (index < 0 || index >= state.practoceList.length) return;
		const targetSentence = sentencesRefs.value[index];
		if (targetSentence) {
			sentenceContainer.value.scrollTop = targetSentence.offsetTop - 70;
		}
	};

	//中间滚动
	const scrollContainer = async (e) => {
		// console.log(e)
	}

	//获取单词详情
	const getMissionAnswerDetail =async () => {
		let response;
		if (route.query.module == 'textbook_synchronization') {
			response = await wordDetail({
				id: route.query.versionId
			})
		} else {
			response = await getMockTests({
				resourceFile: route.query.resourceFile,
				url: '/file/' + route.query.module + '/res/'
			})
		}
		if (response.code == 1) {
			state.practoceList = response.data.resource
			ossBaseUrl.value = response.data.resmain
			automaticPlay()
		}
	}

	// 播放音频
	const playAudio = async () => {
		audioSrc.value = ossBaseUrl.value + state.practoceList[currentPage.value - 1].audioUrl
		recordingStatus.value = 'playing'
		nextTick(async () => {
			await audioElement.value.play()
			setRateInterval(Math.round(audioElement.value.duration))
		})
	}

	//播放结束
	const playEnded = async () => {
		recordingStatus.value = 'playEnded'
		if (currentPage.value == state.practoceList.length) {
			isPlay.value = 'stop'
			currentPage.value = 1
			recordingStatus.value = 'ended'
			return false
		}
		if (isPlay.value == 'play') {
			setTimeout(() => {
				currentPage.value++
			}, 1000)
		}

	}

	const isPlay = ref('stop') //自动播放状态
	const automaticPlay = async () => {
		if (isPlay.value == 'stop') {
			isPlay.value = 'play'
			if (currentPage.value == 1) {
				scrollToSentence(0)
			}
			playAudio()
		} else {
			isPlay.value = 'stop'
		}
	}
	const sentenceContainer = ref(null);
	const sentencesRefs = ref([]); // 用于存储句子的引用  
	onMounted(() => {
		getMissionAnswerDetail()
	})


	const {
		practoceList,
		sourceObj
	} = toRefs(state)
</script>

<style scoped lang="scss">
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		height: 100%;
		font-size: 18px;

		.text {
			margin-left: 10px;
		}
	}

	.circle-container {
		width: 70px;
		/* 容器大小，根据需要调整 */
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-container1 {
		width: 40px;
		/* 容器大小，根据需要调整 */
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		width: 100%;
		height: 100%;
	}

	.circle-bg {
		stroke: #FFFFFF;
		/* 背景圆线条颜色 */
	}

	.circle {
		/* 动画定义 */
		animation: progress 2s ease-out forwards;
	}


	@keyframes progress {
		0% {
			stroke-dashoffset: 100.48;
			/* 初始时，线条完全不可见 */
		}

		100% {
			stroke-dashoffset: 0;
			/* 结束时，线条完全可见 */
		}
	}

	.fillBox {
		height: 120px;
	}

	.container-practice {
		// display: flex;
		// flex-direction: column;
		//    align-items: center;
		height: 100%;
		text-align: center;

		.container-height {
			height: 46px;
		}

		.practice-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;

			.practice-top-currentPage {
				font-size: 16px;
				color: #0CB76C;

				span {
					color: #8E8E8E;
				}
			}

			.practice-top-slider {
				flex: 1;
				margin: 0 10px;

			}

			.practice-top-switch {
				border-radius: 12px;
				font-size: 12px;
				background: #0CB76C;
				display: flex;

				div {
					width: 36px;
					height: 100%;
					color: #FFFFFF;
					text-align: center;
					line-height: 22px;
				}

				.active {
					color: #0CB76C;
					border: 1px solid #0CB76C;
					background: #FFFFFF;
					border-radius: 12px;
				}
			}
		}

		.container-text {
			padding: 0 10px;
			text-align: left;
			font-weight: 500;
			font-size: 18px;

			.container-list {
				// transition: all .9s;
				overflow-y: auto;
				height: calc(100vh - 200px);

				.container-item {
					padding: 20px 0px;
				}
			}
		}


		.practiceFractionBox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20px;
			margin-top: 10px;

			.practiceFraction {
				display: inline-block;
				font-size: 28px;

				img {
					width: 55px;
					height: 12px;
					margin-bottom: 6px;
				}

				.context {
					margin-top: 5px;
					display: flex;
					align-items: center;
					color: #8E8E8E;
					font-size: 12px;

					.lebel {
						margin-right: 6px;
					}
				}
			}
		}


		.practice-button {
			height: 52px;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 20px 20px;
			position: fixed;
			width: 100%;
			bottom: 28px;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.wordsVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 20px;
				}
			}

			.wordsPlay {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 52px;
					height: 52px;
				}
			}

			.myVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 26px;
				}
			}

			.practice-button-complete {
				// margin-right: 68px;
				font-size: 16px;
				color: #0CB76C;

			}

		}

		.practice-bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 28px;
			background: #E7F8F0;
			color: #0CB76C;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 28px;

			.previous {
				padding-left: 20px;
				flex: 1;
				text-align: left;
			}

			.next {
				padding-right: 20px;
				flex: 1;
				text-align: right;
			}

			.langage {
				flex: 1;
				text-align: center;
			}

			.autoPlay {
				flex: 1;
				margin-left: 20px;
				display: flex;
				align-items: center;

				img {
					width: 18px;
					height: 18px;
				}

			}
		}




	}

	.van-overlay {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 200;

		.initialImg {
			width: 375px;
			height: 260px;
		}

		.initialDiv {
			width: 102px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 12px;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			border-radius: 18px;
			position: relative;
			top: 30px;
		}
	}

	.automaticOverlay {
		width: 345px;
		height: 184px;
		background: #FFFFFF;
		border-radius: 15px;
		color: #333333;
		font-size: 16px;
		line-height: 32px;

		.automaticOverlay-context {
			margin: 30px 20px;
		}

		.automaticOverlay-button {
			margin: 0 20px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			div {
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			div:nth-child(1) {
				border: 1px solid #8E8E8E;
				border-radius: 22.5px;
				font-size: #333333;
			}

			div:nth-child(2) {
				border-radius: 22.5px;
				color: #FFFFFF;
				background: linear-gradient(to left, #29F19C, #02A1F9);
			}
		}

	}

	::v-deep .van-slider__button {
		display: none !important;
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>